<template>
    <div class="card-container">
        <van-cell title="会议编码">
			{{ detail.meetingCode }}
			<van-button size="mini" icon="column" class="ml-2" @click="copyMeetingCode(detail.meetingCode)">复制</van-button>
		</van-cell>
        <van-cell title="申请时间">{{ detail.gmtCreate }}</van-cell>
        <van-cell title="会议时间">{{ detail.meetingBeginTime }}</van-cell>
        <van-cell v-if="visitRole != 'doctor'" title="会议状态">
            <span style="padding-right: 5px;" :class="{ 9: 'text-success', 13: 'text-danger' }[detail.approveStatus]">{{ detail.approveStatusDesc }}</span>
            <a v-if="detail.approveStatus === 13" href="javascript:void" @click="showReason(detail.because)">查看原因</a>
        </van-cell>
        <van-cell title="会议形式">{{ detail.shape === 1 ? '线下会' : '线上会' }}</van-cell>
        <van-cell v-if="detail.shape === 1" title="会议地址">{{ detail.address }}</van-cell>
        <van-cell v-if="detail.shape === 2" title="讲者链接" class="line-clear" @click.stop="copySpeakerOnlineUrl">
            <van-button size="small" icon="column">复制</van-button>
        </van-cell>
        <van-cell v-if="detail.shape === 2" title="观众二维码" @click.stop="showQrcode = true"><span class="text-primary">查看</span><van-icon class="text-primary" name="arrow" /></van-cell>
        <div v-for="(speaker, index) in detail.meetingSpeakerList">
            <van-cell :title="speaker.tagName" :title-class="getTagClassName(speaker.tagCode)">
              <p class="mt-0 text-gray mb-0">{{ speaker.speakerName}} | {{ speaker.hospitalName }}</p>
              <p v-if="speaker.topic" class="text-primary mb-0">{{ speaker.topic }}</p>
            </van-cell>
        </div>
        <van-dialog v-model:show="showQrcode" title="观众二维码" confirm-button-text="关闭">
          <img style="width: 100%" :src="detail.signQrUrl" />
        </van-dialog>
    </div>
</template>
<script>
import {computed} from "vue"
import {useStore} from 'vuex'
import useClipboard from 'vue-clipboard3'
import moment from 'moment'
import {showToast, showSuccessToast, showNotify, showConfirmDialog, showDialog} from 'vant'
import useUtils from '@/hooks/useUtils'


export default{
  props: ['id', 'visitRole'],
  name: "detailMeeting",
  data() {
    return {
      showQrcode: false
    }
  },
  setup() {
    const store = useStore()
    const {commit} = useStore()
    let detail = computed(() => store.state.meeting.meetingDetail)
    const { toClipboard } = useClipboard()
    return {
        detail, toClipboard, store, commit
    }
  },
  watch: {

  },
  mounted() {
    if(!this.detail || !this.detail.meetingBeginTime) {
      this.store.dispatch('meeting/detailMeeting')
    }
  },
  methods: {
    async copySpeakerOnlineUrl() {
        try {
            await this.toClipboard('会议号：' + this.detail.meetingCode + '\n讲者参会链接：' + this.detail.onlineUrl)
            showSuccessToast('复制成功')
        } catch (err) {
            console.log(err)
            showToast('复制失败')
        }
    },
    async copyMeetingCode (text) {
        try {
            await this.toClipboard(text)
            showSuccessToast('复制成功')
        } catch (err) {
            console.log(err)
            showToast('复制失败')
        }
    },
    getTagClassName(tagCode) {
        return useUtils().getTagClassName(tagCode)
    },
    showReason(because) {
			showDialog({
				title: '拒绝原因',
				message: because,
			}).then(() => {
			// on close
			});
		},
  }
};
</script>
